<template>
  <div class="app">
    <div class="swipeimg-box" @click="gotolink('/clubapply')">
      <img src="../assets/images/jiameng.png" alt="" />
    </div>
    <div class="location-box" @click="gotolink('/setuserlocation')">
      <div class="icon-box">
        <icon-svg
          icon-class="dingwei"
          icon-color="#304056"
          class="dingweiicon"
        ></icon-svg>
      </div>
      <div class="location-text">
        {{ currentcity }}
      </div>
    </div>
    <div class="search-scan-box" @click="gotolink('/searchpage')">
      <div class="icon-box">
        <icon-svg
          icon-class="search"
          icon-color="#304056"
          class="search-scan-icon"
        ></icon-svg>
      </div>
      <div class="icon-box">
        <icon-svg
          icon-class="skan"
          icon-color="#304056"
          class="search-scan-icon"
        ></icon-svg>
      </div>
    </div>

    <div class="three-functions">
      <div class="appointment-box" @click="gotolink('clublistpage')">
        <icon-svg
          icon-class="yuyue"
          icon-color="#304056"
          class="yuyue-icon"
        ></icon-svg>
        <div class="tag">场馆预约</div>
      </div>
      <div class="right-boxes">
        <div class="competition-box" @click="gotolink('./competition')">
          <icon-svg
            icon-class="compete"
            icon-color="#304056"
            class="competition-icon"
          ></icon-svg>
          <div class="tag">赛事</div>
        </div>
        <div class="education-box" @click="gotolink('./jiaopei')">
          <icon-svg
            icon-class="teach"
            icon-color="#304056"
            class="competition-icon"
          ></icon-svg>
          <div class="tag">教培</div>
        </div>
      </div>
    </div>

    <div
      class="yuyuecontainer"
      v-if="
        orderinfo.yuyuetable.length > 0 || orderinfo.yuyuezhujiao.length > 0
      "
      @click="gotolink('tableyuyueing')"
    >
      <div class="yuyuetitle">预约提醒</div>
      <van-divider style="margin: 10px 0 0 0; border-color: gray" />
      <div
        v-for="(torder, index) in orderinfo.yuyuetable"
        :key="index"
        class="yuyuebox"
      >
        <div class="yuyueline1">
          <div class="linetitle">预约时间</div>
          <div class="linetime">{{ torder.time }}</div>
        </div>
        <div class="yuyueline">
          <div class="linetitle">场馆名字</div>
          <div class="linecontent">{{ torder.store_name }}</div>
        </div>
        <div class="yuyueline">
          <div class="linetitle">预约球桌</div>
          <div class="linecontent">
            {{ torder.level }}{{ torder.t_number }}号球桌
          </div>
        </div>
      </div>
      <div
        v-for="(torder, index) in orderinfo.yuyuezhujiao"
        :key="index"
        class="yuyuebox"
      >
        <div class="yuyueline1">
          <div class="linetitle">预约时间</div>
          <div class="linetime">{{ torder.time }}</div>
        </div>
        <div class="yuyueline">
          <div class="linetitle">预约教练</div>
          <div class="linecontent">{{ torder.zhujiao_name }}</div>
        </div>
      </div>
    </div>

    <div
      class="playingcontainer"
      v-if="orderinfo.playingtable.length > 0"
      @click="gotolink('tableplaying')"
    >
      <div class="yuyuetitle">进行中球局</div>
      <van-divider style="margin: 10px 0 0 0; border-color: gray" />
      <div
        v-for="(torder, index) in orderinfo.playingtable"
        :key="index"
        class="playingbox"
      >
        <div style="display: flex; flex-direction: column">
          <div class="linetitle">{{ torder.store_name }}</div>
          <van-divider style="margin: 8px 0 8px 0; border-color: gray" />
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
            "
          >
            <div class="linetitle1">
              {{ torder.level }}{{ torder.t_number }}号球桌
            </div>
            <div class="linetime1">{{ formatTime(torder.pay_time) }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="special-offer-box">
      <div class="special-offer-title">
        <div class="special-offer-text">限时优惠</div>
        <div class="special-offer-more">更多 ></div>
      </div>

      <div class="special-offer-content">
        <div>
          <div class="imgcontainer">
            <img src="../assets/images/club1.jpg" alt="" />
          </div>
          <div class="offer-name">商品名称</div>
          <div class="offer-price">价格 29.9</div>
        </div>
        <div>
          <div class="imgcontainer">
            <img src="../assets/images/club1.jpg" alt="" />
          </div>
          <div class="offer-name">商品名称</div>
          <div class="offer-price">价格 29.9</div>
        </div>
        <div>
          <div class="imgcontainer">
            <img src="../assets/images/club1.jpg" alt="" />
          </div>
          <div class="offer-name">商品名称</div>
          <div class="offer-price">价格 29.9</div>
        </div>
        <div>
          <div class="imgcontainer">
            <img src="../assets/images/club1.jpg" alt="" />
          </div>
          <div class="offer-name">商品名称</div>
          <div class="offer-price">价格 29.9</div>
        </div>
      </div>
    </div>

    <div class="recommend-teacher-box">
      <div class="recommend-teacher-title">
        <div class="recommend-teacher-text">推荐助教</div>
        <div class="recommend-teacher-more">更多 ></div>
      </div>
      <div class="recommend-teacher-content">
        <div style="display: flex">
          <div
            class="zhujiaocard"
            v-for="(item, index) in zhujiaolist"
            :key="index"
            @click="zhujiaodetail(item)"
          >
            <div class="image-container">
              <img class="zhujiaoimg" v-lazy="item.image" alt="" />
            </div>
            <div class="zhujiaoinfo">
              <div class="zhujiaonickname">昵称：{{ item.nickname }}</div>
              <div class="levelbox">
                <div class="zhujiaolevel">{{ item.level }}</div>
                <div class="zhujiaoaixin">
                  <van-icon name="like-o" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="store-box">
      <div class="store-box-title">
        <div class="store-box-text">优秀店铺</div>
        <div class="store-box-more" @click="gotolink('/clublistpage')">
          更多 >
        </div>
      </div>
      <div
        class="store-box-list"
        v-for="(store, index) in indexstorelist"
        :key="index"
      >
        <div class="store-box-content">
          <div class="img-wrapper">
            <img v-lazy="store.storecover_image[0]" alt="" />
          </div>
          <div class="infocontain">
            <div class="linebox">
              <div class="store-name">{{ store.store_name }}</div>
              <div class="store-score">评分：{{ store.score }}</div>
            </div>
            <div class="linebox">
              <van-text-ellipsis
                class="store-address"
                :content="store.address"
              />
              <div
                class="store-distance"
                v-if="store.hasOwnProperty('distance')"
              >
                距离：{{ metertokm(store.distance) }}km
              </div>
            </div>

            <div class="store-status" v-if="store.can_reserve">可预约</div>
            <div class="store-status" v-if="!store.can_reserve">不可预约</div>
            <div class="linebox">
              <div class="store-detail">空闲球桌：{{ store.kongxian }}桌</div>
              <div class="store-open-detail">查看详情</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom))" />
  </div>
</template>

<script>
import { getuserplayingorder, getindexstore, timbill } from "@/http/request.js";
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      searchvalue: "",
      currentcity: "",
      userid: "",
      orderinfo: {
        yuyuetable: [],
        yuyuezhujiao: [],
        playingtable: [],
        playingzhujiao: [],
      },
      indexstorelist: [],
      timer: null,
      zhujiaolist: [
        {
          image: require("../assets/images/zhujiao1.png"),
          nickname: "xxx",
          level: "高级助教",
        },
        {
          image: require("../assets/images/zhujiao1.png"),
          nickname: "yyy",
          level: "高级助教",
        },
        {
          image: require("../assets/images/zhujiao1.png"),
          nickname: "zzz",
          level: "高级助教",
        },
      ],
    };
  },
  methods: {
    gotolink(path) {
      this.$router.push(path);
    },
    async init() {
      try {
        const store = useStore();
        const userinfo = store.getUserStoreinfo;
        await Promise.all([
          store.setYuyueingOrder({ table: [], zhujiao: [] }),
          store.setPlayingOrder({ table: [], zhujiao: [] }),
          store.setNotPayOrder({ table: [], zhujiao: [] }),
        ]);
        const res = await getuserplayingorder({ id: userinfo.id });
        if (res.code === 0 && res.data !== null) {
          this.processOrderData(res.data, store);
        }
        console.log(store.getYuyueingOrder);
      } catch (error) {
        showToast("网络开小差啦，请稍后再试");
      }
    },

    processOrderData(data, store) {
      if (data && (data.table_order || data.zhujiao_order)) {
        this.processOrderType(data.table_order, store, "table");
        this.processOrderType(data.zhujiao_order, store, "zhujiao");
      }
    },

    processOrderType(orderData, store, type) {
      if (orderData && Object.keys(orderData).length !== 0) {
        const orderValues = Object.values(orderData);
        this.orderinfo[`yuyue${type}`] = orderValues.filter(
          (order) => order.order_status === 1
        );
        this.orderinfo[`playing${type}`] = orderValues.filter(
          (order) => order.order_status === 5
        );
        this.initOrder(orderValues, type);
        orderValues.forEach((order) => {
          this.processOrderStatus(order, store, type);
        });
      }
    },

    initOrder(orderList, type) {
      for (var i = 0; i < orderList.length; i++) {
        if (type === "table") {
          this.initTableOrder(orderList[i]);
        } else if (type === "zhujiao") {
          this.initZhujiaoOrder(orderList[i]);
        }
      }
    },

    processOrderStatus(order, store, type) {
      let targetStore;
      let tarsetStore;
      switch (order.order_status) {
        case 1:
          targetStore = store.getYuyueingOrder;
          tarsetStore = store.setYuyueingOrder;
          break;
        case 5:
          targetStore = store.getPlayingOrder;
          tarsetStore = store.setPlayingOrder;
          break;
        case 2:
          targetStore = store.getNotPayOrder;
          tarsetStore = store.setNotPayOrder;
          break;
        default:
          break;
      }

      if (targetStore) {
        let orderList = targetStore[type] || [];
        if (!orderList.some((item) => item.order_id === order.order_id)) {
          orderList.push(order);
          targetStore[type] = orderList;
          tarsetStore(targetStore);
        }
      }
    },

    initTableOrder(order) {
      if (order.t_grade === 1) {
        order.level = "中巴";
      } else if (order.t_grade === 2) {
        order.level = "包间";
      } else if (order.t_grade === 3) {
        order.level = "斯诺克";
      }
      order.time = this.formatTimeRange(order.start_time, order.end_time);
    },

    initZhujiaoOrder(order) {
      order.time = this.formatTimeRange(order.start_time, order.end_time);
    },

    formatTimeRange(startTime, endTime) {
      let startDate = new Date(startTime);
      let endDate = new Date(endTime);
      let startTimeString = `${startDate.getFullYear()}-${(
        startDate.getMonth() + 1
      )
        .toString()
        .padStart(2, "0")}-${startDate
        .getDate()
        .toString()
        .padStart(2, "0")} ${startDate
        .getHours()
        .toString()
        .padStart(2, "0")}:${startDate
        .getMinutes()
        .toString()
        .padStart(2, "0")}`;
      let endTimeString = `${endDate
        .getHours()
        .toString()
        .padStart(2, "0")}:${endDate.getMinutes().toString().padStart(2, "0")}`;
      return `${startTimeString} - ${endTimeString}`;
    },

    gettimbill() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      for (let i = 0; i < this.orderinfo.playingtable.length; i++) {
        timbill({
          user_id: userinfo.id,
          o_id: this.orderinfo.playingtable[i].id,
        }).then((res) => {
          if (res.code == 0) {
            this.orderinfo.playingtable[i].is_continuation =
              res.data.is_continuation;
            this.orderinfo.playingtable[i].pay_money =
              res.data.now_price.toFixed(2);
            this.orderinfo.playingtable[i].pay_time = Math.round(
              res.data.time_elapsed
            );
            this.startTimer(this.orderinfo.playingtable[i]);
          }
        });
      }
    },
    startTimer(order) {
      order.timer = setInterval(() => {
        order.pay_time++;
        order.pay_money = (order.danjia * order.pay_time).toFixed(2);
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
    formatTime(seconds) {
      let hours = Math.floor(seconds / 3600);
      let minutes = Math.floor((seconds % 3600) / 60);
      let remainingSeconds = seconds % 60;

      // 添加前导零
      hours = String(hours).padStart(2, "0");
      minutes = String(minutes).padStart(2, "0");
      remainingSeconds = String(remainingSeconds).padStart(2, "0");
      return hours + ":" + minutes + ":" + remainingSeconds;
    },
    metertokm(distance) {
      let kilometers = distance / 1000;
      let formattedKilometers = kilometers.toFixed(2);
      return formattedKilometers;
    },

    getcity() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      if (
        userinfo !== null &&
        userinfo !== undefined &&
        (userinfo.city != null || userinfo.currentcity != null)
      ) {
        if (
          userinfo.currentcity == null ||
          userinfo.currentcity == "" ||
          userinfo.currentcity == undefined
        ) {
          const addressArray = userinfo.city.split("/");
          const cityWithSuffix = addressArray[1];
          const cityWithoutSuffix = cityWithSuffix.replace(/市$/, "");
          this.userid = userinfo.id;
          this.currentcity = cityWithoutSuffix;
          getindexstore({ city: addressArray[0] + "/" + addressArray[1] }).then(
            (res) => {
              if (res.code == 0) {
                for (var i = 0; i < res.data.length; i++) {
                  const jsonString = res.data[i].storecover_image.replace(
                    /'/g,
                    '"'
                  );
                  res.data[i].storecover_image = JSON.parse(jsonString);
                  const jsonString1 = res.data[i].storedescribe_image.replace(
                    /'/g,
                    '"'
                  );
                  res.data[i].storedescribe_image = JSON.parse(jsonString1);
                }

                this.indexstorelist = res.data;
              }
            }
          );
        } else {
          const addressArray = userinfo.currentcity.split("/");
          const cityWithSuffix = addressArray[1];
          const cityWithoutSuffix = cityWithSuffix.replace(/市$/, "");
          this.currentcity = cityWithoutSuffix;
          getindexstore({ city: addressArray[0] + "/" + addressArray[1] }).then(
            (res) => {
              if (res.code == 0) {
                for (var i = 0; i < res.data.length; i++) {
                  const jsonString = res.data[i].storecover_image.replace(
                    /'/g,
                    '"'
                  );
                  res.data[i].storecover_image = JSON.parse(jsonString);
                  const jsonString1 = res.data[i].storedescribe_image.replace(
                    /'/g,
                    '"'
                  );
                  res.data[i].storedescribe_image = JSON.parse(jsonString1);
                }

                this.indexstorelist = res.data;
              }
            }
          );
        }
      } else {
        this.currentcity = "未定位";
      }
    },
    gotolink(path) {
      this.$router.push(path);
    },
    zhujiaodetail(item) {
      this.$router.push({
        name: "ZhujiaoDetail",
        params: {
          zhujiaoinfo: JSON.stringify(item),
        },
      });
    },
  },
  mounted() {
    this.getcity();
    this.init();
  },
  destroyed() {
    this.stopTimer();
  },
};
</script>

<style scoped>
.app {
  background-color: #f5f5f5;
}
.swipeimg-box {
  width: 100%;
  height: 230px;
  border-radius: 0 0 100% 100%/0 35px 35px;
  position: relative;
  overflow: hidden;
}
.swipeimg-box img {
  width: 100%;
  height: 230px;
  border-radius: 0 0 100% 100%/0 35px 35px;
  object-fit: cover;
}

.search-scan-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 25px;
  right: 15px;
  background-color: #b8d2fa;
  width: 95px;
  border-radius: 30px;
}

.icon-box img {
  width: 16px;
}

.location-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 25px;
  left: 15px;
  width: 100px;
  border-radius: 10px;
  font-size: 15px;
  color: #fffffd;
}

.location-box .location-text {
  width: 50px;
}

.search-scan-box .icon-box {
  margin: 5px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.search-scan-box .icon-box .search-scan-icon {
  width: 15px;
  height: 15px;
  margin-right: 1px;
}
.icon-box .dingweiicon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.ongoing-ball-game-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 200px;
  left: 30px;
  width: 170px;
  height: 45px;
  border-radius: 50px;
  font-size: 20px;
  box-shadow: 0 0 5px 0 #faeabb;
}

.ongoing-ball-game-box .yuyuebottom-icon {
  width: 260px;
  height: 130px;
  border-radius: 50px;
  margin-right: -6px;
  margin-left: -5px;
}

.ongoing-ball-game-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  transform: translate(-50%, -50%);
  color: #fbfcfd;
  font-size: 20px;
}

.three-functions {
  display: flex;
  justify-content: space-between;
  flex: 2;
  margin: 10px 10px;
  height: 220px;
}

.appointment-box {
  height: 210px;
  width: 120%;
  padding: 0 0;
  position: relative;
  flex: 1;
}

.appointment-box .tag {
  position: absolute;
  left: 20px;
  top: 15px;
  color: black;
  padding: 2px 5px;
  font-size: 22px;
  border-radius: 2px;
}

.appointment-box .yuyue-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
  margin: 0 auto;
  padding: 0;
  border-radius: 10px;
}

.right-boxes {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 220px;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.competition-box .tag,
.education-box .tag {
  position: absolute;
  left: 20px;
  top: 15px;
  color: black;
  padding: 2px 5px;
  font-size: 22px;
  border-radius: 2px;
}

.competition-box,
.education-box {
  width: 100%;
  height: 110px;
  margin: 0 0;
  padding: 0 0;
  position: relative;
}

.competition-icon {
  width: 100%;
  height: 100%;
  margin: 0 0;
}

.yuyuecontainer {
  margin: 10px 20px 0 20px;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 10px;
  background: linear-gradient(to bottom, white, #d5e3fd);
  max-height: 400px;
  overflow: scroll;
}

.yuyuetitle {
  font-size: 18px;
}
.yuyuebox {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.yuyueline1 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin: 8px 0 3px 0;
}
.yuyueline {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin: 3px 0 3px 0;
}
.linetitle {
  font-size: 16px;
}

.linetime {
  font-size: 16px;
  margin-left: 15px;
  color: #5d93fe;
}
.linecontent {
  font-size: 16px;
  margin-left: 15px;
}

.playingcontainer {
  margin: 10px 20px 0 20px;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 10px;
  background: linear-gradient(to bottom, white, #c5d9ff);
  max-height: 400px;
  overflow: scroll;
}

.playingbox {
  width: 100%;
  margin: 10px 0 0 0;
  box-sizing: border-box;
  padding: 5px;
  background-color: white;
  border-radius: 5px;
}
.linetitle1 {
  font-size: 18px;
}
.linetime1 {
  font-size: 16px;
  color: #ff8060;
}

.zhujiaocard {
  position: relative;
  width: calc(33.33% - 10px); /* 为边距留出空间 */
  margin: 5px;
  border-radius: 10px;
  overflow: hidden; /* 确保图片圆角与卡片相匹配 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8); /* 水平偏移，垂直偏移，模糊距离，颜色 */
}
.image-container {
  width: 100%;
  height: 150px; /* 设置容器高度为 100px */
  overflow: hidden; /* 超出容器的部分隐藏 */
  border-top-left-radius: 10px; /* 容器左上角圆角 */
  border-top-right-radius: 10px; /* 容器右上角圆角 */
}

.zhujiaoimg {
  width: 100%; /* 图片宽度填满容器 */
  height: auto; /* 高度自适应，保持宽高比 */
  display: block;
}
.zhujiaoinfo {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 95%;
  background-color: rgba(59, 59, 59, 0.7); /* 半透明遮罩层 */
  color: white; /* 文本颜色 */
  border: 1px solid white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex;
}
.zhujiaonickname {
  line-height: 18px;
  font-size: 14px;
  margin: 5px 0 0 10px;
}
.levelbox {
  display: flex;
  justify-content: space-between;
  margin: 0 0 5px 10px;
}
.zhujiaolevel {
  line-height: 18px;
  font-size: 14px;
}
.zhujiaoaixin {
  line-height: 18px;
  font-size: 18px;
  margin-right: 5px;
}
.store-box img {
  display: block;
  width: 180px;
  margin: 0 0;
  padding: 0 0;
}

.special-offer-box,
.recommend-teacher-box,
.store-box {
  margin: 20px 20px;
}

.special-offer-title,
.recommend-teacher-title,
.store-box-title {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.special-offer-text,
.recommend-teacher-text,
.store-box-text {
  font-size: 20px;
  margin: 0 0 10px 0;
}

.special-offer-more,
.recommend-teacher-more,
.store-box-more {
  font-size: 15px;
  color: gray;
}
.imgcontainer {
  display: block;
  width: 80px;
  height: 80px;
  padding: 0 0;
  border-radius: 10px;
  overflow: hidden;
}
.imgcontainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.special-offer-content {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.offer-name {
  color: #333;
  font-size: 17px;
  font-weight: bold;
}

.offer-price {
  color: rgb(255, 34, 34);
  font-size: 12px;
}
.store-box-list {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background-color: white;
}
.store-box-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.img-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 8px;
}

.img-wrapper img {
  width: 100%;
  height: auto; /* 将高度设置为自动以确保宽高比不变 */
  aspect-ratio: 1 / 1; /* 设置宽高比为1:1，即正方形 */
  object-fit: cover;
  border-radius: 8px;
}
.infocontain {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
}
.linebox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-name {
  font-size: 15px;
  font-weight: bold;
  color: black;
}

.store-address {
  width: 80%;
  font-size: 12px;
  color: gray;
}
.store-detail {
  font-size: 14px;
  color: gray;
}
.store-status {
  font-size: 12px;
  color: green;
  background-color: white;
  width: 45px;
  height: 15px;
  border-radius: 3px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.store-score,
.store-distance {
  font-size: 12px;
  color: gray;
}

.store-open-detail {
  font-size: 14px;
  color: white;
  width: auto;
  height: 25px;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 10px;
  background-color: #5e94fd;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
